<template>
  <div>
    <section class="checkout-page">
      <div class="container">
        <p v-show="currentUser != null">
          欢迎你 <a href="/home">{{ currentUser }}</a>
        </p>
        <p v-show="currentUser == null">
          您是回头客? <a href="/login">点击此处登录</a>，您是第一次购买?
          <a href="/register">点击此处注册</a>
        </p>
        <!-- <i class="fa fa-spinner" aria-hidden="true"></i> -->
        <p>送货至：</p>
        <AddressForm @getAddress="getAddress" />
        <h3 class="order-title">您的订单</h3>
        <div class="row">
          <div class="col-md-6">
            <div class="order-details">
              <div class="order-details__top">
                <p>产品</p>
                <p>数量</p>
                <p>小计</p>
              </div>
              <p :key="goods.id" v-for="goods in carts">
                <span>{{ goods.name }}</span>
                <span>{{ goods.num }}</span>
                <span>${{ goods.price * goods.num }} USD</span>
              </p>

              <br />
              <div class="order-details__top">
                <p></p>
                <p>总计</p>
                <p>${{ Subtotal }} USD</p>
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="order-payment">
              <ul
                id="accordion"
                class="list-unstyled"
                data-wow-duration="1500ms"
              >
                <li>
                  <h2 class="para-title active">
                    <span
                      class="collapsed"
                      role="button"
                      data-toggle="collapse"
                      data-target="#collapseTwo"
                      aria-expanded="false"
                      aria-controls="collapseTwo"
                    >
                      使用金币支付
                    </span>
                  </h2>
                  <div
                    id="collapseTwo"
                    class="collapse show"
                    role="button"
                    aria-labelledby="collapseTwo"
                    data-parent="#accordion"
                  >
                    <p>
                      直接将您的款项存入我们的银行账户。请使用您的订单ID作为付款参考。在资金结清之前，您的订单不会发货。
                    </p>
                  </div>
                </li>
                <li>
                  <h2 class="para-title">
                    <span
                      class="collapsed"
                      role="button"
                      data-toggle="collapse"
                      data-target="#collapseOne"
                      aria-expanded="false"
                      aria-controls="collapseOne"
                    >
                      使用支付宝支付
                      <img
                        src="assets/images/products/paypal-1-1.jpg"
                        tppabs="https://www.17sucai.com/preview/776298/2021-05-10/oganik/assets/images/products/paypal-1-1.jpg"
                        alt=""
                      />
                    </span>
                  </h2>
                  <div
                    id="collapseOne"
                    class="collapse"
                    aria-labelledby="collapseOne"
                    data-parent="#accordion"
                  >
                    <p>
                      直接将您的款项存入我们的银行账户。请使用您的订单ID作为付款参考。在资金结清之前，您的订单不会发货。
                    </p>
                  </div>
                </li>
              </ul>
            </div>
            <div class="text-right">
              <a href="#" class="thm-btn" @click.prevent="handleSubmit()"
                >立即支付</a
              >
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
/* eslint-disable */
import { saveStorage, getStorage, create } from "@/api/order";
import router from "@/router/routers";

export default {
  data() {
    return {
      currentId: localStorage.getItem("UID"),
      currentUser: localStorage.getItem("NAME"),
      carts: null,
      address: null,
      Subtotal: null,
      ShippingCost: null,
      Total: null,
      order: {
        details: null,
        totalAmount: null,
        address: null,
      },
    };
  },
  watch: {},
  mounted() {
    this.getSubtotal();
  },
  methods: {
    getCarts(val) {
      this.carts = val;
      console.log(this.carts);
    },
    getAddress(val) {
      this.address = val;
      console.log(this.address);
    },
    getSubtotal() {
      this.carts.forEach((element) => {
        this.Subtotal += element.price * element.num;
      });
      this.ShippingCost = 0;
      this.Total = this.Subtotal - this.ShippingCost;
    },
    handleSubmit() {
      this.order.details = this.carts;
      this.order.details.forEach((element) => {
        element.gid = element.id;
        element.count = element.num;
      });
      this.order.totalAmount = this.Total;
      this.order.paidAmount = this.Total;
      this.order.youhui = 0;
      this.order.address = this.address;
      this.order.address.uid = localStorage.getItem("UID");
      // 用户未登录
      if (this.order.address.uid == null) {
        location.href = "/login?redirect=%2Fcheckout.html";
      } else {
        saveStorage(this.order).then((res) => {
          // 清空购物车
          // localStorage.setItem("BANDEER_CITY_CART", null);
          if (res.startsWith("confirm")) {
            console.log(res);
            this.$confirm("存在近期相似订单,是否创建新订单 ?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            })
              .then((res) => {
                console.log(res);
                create().then((res) => {
                  location.href = res;
                });
              })
              .catch((action) => {
                //判断是 cancel (自定义的取消) 还是 close （关闭弹窗）
                if (action === "cancel") {
                  location.href = res.split("-")[1];
                  console.log(action);
                }
              });
          } else if (res.startsWith("error")) {
            this.$message("订单创建失败");
          } else {
            location.href = res;
          }
        });
        // .finally(() => {
        //   create().then((res) => {
        //     console.log(res);
        //     // location.href = res;
        //     // router.push({ path: res });
        //   });
        // });
      }
      console.log(this.order);
    },
  },
};
</script>

<style scoped>
</style>